<template>
  <div class="navbar">
<!--    <div class="title" >-->
<!--      问卷星球 · 您的问卷好帮手-->
<!--    </div>-->
    <div class="backToFirst" @click="back">
      <el-button style="background-color: #d7ebff;color: #007af7" @click="homeClick"><i class="el-icon-s-home"></i> 回到首页</el-button>
    </div>
    <div class="logo">
      <img style="height: 110px; width: 495px;" src="../assets/newlogo.png">
    </div>
    <div class="logout" @click="logout">
      <el-button style="background-color: #d7ebff;color: #007af7">退出登录</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "appheader",
  methods: {
    homeClick: function() {
      this.$router.push("/meCreate");
    },
    logout:function (){
      localStorage.setItem("token", "");
      localStorage.setItem("username", "")
      console.log("我退出了")
      this.$router.push('/');
    }
  }
}
</script>
<style>
.navbar {
  display: flex;
  padding-left: 0px;
  align-items: center;
  height: 100px;
  align-content: center;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: inset 0px 5px 10px 0px #e7e7e7;
}
.navbar .backToFirst{
  position: absolute;
  left: 2%;
}
.navbar .logo {
  transform: translate(-50%, -50%);
  position: absolute;
  top:7%;
  left: 53%;
}
.navbar .logout{
  position: absolute;
  right: 20px;
}

</style>
